<?php $activePage = "dialogs"; ?>
<?php include("includes/header.php"); ?>	
<!-- container -->
<div class="container">			
	<div class="row">
		<div class="g12">
			<h2 class="h2">Dialogs & Block Messages</h2>
			<hr />
		</div>
	</div>

	
	
	<div class="row">
		<div class="g8">
			<h3 class="h3">Simple Block Messages</h3>
			<hr />
			<div class="msg msg_warning">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus. 
			</div>
			
			<div class="msg msg_info">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus. 
			</div>
			
			<div class="msg msg_success">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus. 
			</div>
			
			<div class="msg msg_error">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus. 
			</div>
			
			
			<h3 class="h3">Block Messages with Icon</h3>
			<hr />
			<div class="msg msg_warning msg_big pf">
				<div class="pf_fix"></div>
				<div class="pf_fluid">
					<p class="msg_title">Lorem ipsum dolor sit amet</p>
					<p class="msg_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus.</p> 
				</div>
			</div>
			
			<div class="msg msg_info msg_big pf">
				<div class="pf_fix"></div>
				<div class="pf_fluid">
					<p class="msg_title">Lorem ipsum dolor sit amet</p>
					<p class="msg_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus.</p> 
				</div>
			</div>
			
			<div class="msg msg_success msg_big pf">
				<div class="pf_fix"></div>
				<div class="pf_fluid">
					<p class="msg_title">Lorem ipsum dolor sit amet</p>
					<p class="msg_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus.</p> 
				</div>
			</div>
			
			<div class="msg msg_error msg_big pf">
				<div class="pf_fix"></div>
				<div class="pf_fluid">
					<p class="msg_title">Lorem ipsum dolor sit amet</p>
					<p class="msg_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus.</p> 
				</div>
			</div>
			
			<h3 class="h3">Block Messages with Javscript</h3>
			<div id="notificationPanel"></div>
			<p><a href="#" id="showMsgWarning">Show Warning Message</a></p>
			<script type="text/javascript">
				$(function(){
					$('#showMsgWarning').click(function(e){
						e.preventDefault();
						showMsg('#notificationPanel', "big", "warning", 0, "Lorem ipsum", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus.");
					})
				});
			</script>
			
			<p><a href="#" id="showMsgInfo">Show Info Message</a></p>
			<script type="text/javascript">
				$(function(){
					$('#showMsgInfo').click(function(e){
						e.preventDefault();
						showMsg('#notificationPanel', "big", "info", 0, "Lorem ipsum", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus.");
					})
				});
			</script>
			
			<p><a href="#" id="showMsgSuccess">Show Success Message</a></p>
			<script type="text/javascript">
				$(function(){
					$('#showMsgSuccess').click(function(e){
						e.preventDefault();
						showMsg('#notificationPanel', "big", "success", 0, "Lorem ipsum", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus.");
					})
				});
			</script>
			
			<p><a href="#" id="showMsgError">Show Error Message</a></p>
			<script type="text/javascript">
				$(function(){
					$('#showMsgError').click(function(e){
						e.preventDefault();
						showMsg('#notificationPanel', "big", "error", 0, "Lorem ipsum", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus.");
					})
				});
			</script>
		</div>
		<div class="g4">
			<h4 class="h4">Block Messages info</h4>
			
			<ul class="disc">
				<li>
					Empty
				</li>
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="g8">	
			
			<h3 class="h3">Dialogs</h3>
			<hr />
			
			<!-- this is the html structure of a basic dialog -->
			<div id="autoOpenDialog" class="hidden">
				<div class="dialogContent">
					<h2 class="h2">AutoOpen</h2>
					<p>This dialog is open on document ready. Just with this code:</p>
					<pre>doDialog('#autoOpenDialog',true);</pre>
				</div>
			</div>
			<script type="text/javascript">
				$(function(){
					doDialog('#autoOpenDialog',true);
				});
			</script>
			<!-- end of autoOpen dialog -->
			
			
			<p><a href="#basicDialog" class="openDialog">Open Basic Dialog</a></p>
			<!-- this is the html structure of a basic dialog -->
			<div id="basicDialog" class="hidden">
				<div class="dialogContent">
					<h2 class="h2">Basic Dialog</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium sem in nulla commodo pharetra.</p>
				</div>
			</div>
			<!-- end of basic dialog -->
			
			
			<p><a href="#wideDialog" class="openDialog">Open Wide Dialog</a></p>
			<!-- this is the html structure of a basic dialog -->
			<div id="wideDialog" class="hidden" data-dialog_width="800">
				<div class="dialogContent">
					<h2 class="h2">Wide Dialog</h2>
					<p>You can set dialog width with attribute <code>data-dialog_width</code> on dialog html structure. example:</p>
					<pre>&lt;div id="wideDialog" class="hidden" data-dialog_width="800"&gt;</pre>
				</div>
			</div>
			<!-- end of basic dialog -->
			
			<p><a href="#actionsDialog" class="openDialog">Open Dialog with Buttons</a></p>
			<!-- this is the html structure of a dialog with buttons -->
			<div id="actionsDialog" class="hidden">
				<div class="dialogContent">
					<h2 class="h2">Basic Dialog</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium sem in nulla commodo pharetra.</p>
				</div>
				<div class="dialogFooter">
					<a href="#" class="bt"><span>aceptar</span></a>
					<a href="#" class="bt bt_sub"><span>cancelar</span></a>
				</div>
			</div>
			<!-- end of dialog with buttons -->
			
			

		</div>
	
		<div class="g4">
			<h4 class="h4">Dialog info</h4>
			
			<ul class="disc">
				<li>
					Empty
				</li>
			</ul>
		</div>
	</div>
</div><!-- container -->		
<?php include("includes/footer.php"); ?>	